<script>
  import aplayer from 'vue-aplayer'
  import axios from "axios";
  import global_msg from "../../global";
  import personal from "../components/personal.vue";
  import topNav from "../components/topNav.vue"
  import RandomBlogComponent from "../components/RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"
  export default {
    components: {
      RandomBlogComponent,
      topNav,
      personal,
      aplayer,
      bottomInfo,
    },
    data() {
      return {
        hotTag: [{"id":"05023f8da31c4b4187cc6899e2a3aec2","name":"镇远县"},{"id":"0ef028e5278f4f5ca31f99f1bd22b1cc","name":"剑河县"},{"id":"1a32ef04d3c548eaa6777abb46da32f2","name":"台江县"},{"id":"2c26488325bd493687d16315fe0e5fdd","name":"岑巩县"},{"id":"3a786111828a4b9f89ae9da25753eedd","name":"黎平"},{"id":"4ed593eed91b4244969995237f5c96c5","name":"丹寨县"},{"id":"615d2c178f1a47cb8d473823e74f5386","name":"凯里市"},{"id":"76f652df03db43349272a9aff492b065","name":"榕江县"},{"id":"8ff29d0d35e548feb945063b34ed9c9b","name":"黄平县"},{"id":"a8ac2170008746fdadc05ea461bc5e37","name":"雷山县"}],
        c1Show:false,

        //分页功能相关参数
        pagination: {
          data: [],
          totalPage: [],
          //每页显示数量
          pageSize: 5,
          //总页数
          pageNum: 1,
          //当前页面数据
          dataShow: "",
          pageNumShow: [],
          //当前页数默认为0
          currentPage: 0,
        },
        loading:true,
        //搜索框输入绑定
        sinput: '',
        typingTexts: [
          "Je t'aime",
          "Music",
          "Tarvel",
          "Coding"
        ],
      };
    },
    mounted() {
    },
    methods: {
      //给前端分页的页面单独赋值id
      page(index) {
        return "page" + index;
      },
      nextPage() {
        if (this.pagination.currentPage === this.pagination.pageNum - 1) {

          this.$message('已经是最后一页了')
          return;
        }
        this.pagination.dataShow = this.pagination.totalPage[++this.pagination.currentPage]
        for (let i = 0; i < this.pagination.pageNumShow.length; i++) {
          this.pagination.pageNumShow[i]++
        }
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 750,
          left: 0
        });
      },
      //上一页
      prePage() {
        if (this.pagination.currentPage === 0) {
          this.$message('已经是第一页了')
          return;
        }
        this.pagination.dataShow = this.pagination.totalPage[--this.pagination.currentPage]
        for (let i = 0; i < this.pagination.pageNumShow.length; i++) {
          this.pagination.pageNumShow[i]--
        }
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 750,
          left: 0
        });
      },
      //从首图下滑到主页面
      down() {
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 750,
          left: 0
        });
      },
      getBlog() {
        axios({
          method: 'get',
          url: '/getblog'
        }).then(res => {
          this.paginationPage(res)
        })
      },
      toDetail(id) {
        this.$router.push({path:'/detail',query:{id:id}})
      },


      toCate(type) {
        axios.put("/getbytype",this.$qs.stringify({type:type})).then(res=>{
          this.paginationPage(res)
        })
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 0,
          left: 0
        });
      },
      paginationPage(res) {
        res.data.data.reverse()
        //计算页数
        this.pagination.pageNum = Math.ceil(res.data.data.length / this.pagination.pageSize) || 1;
        //这里用来附加前端页面跳转组件，如果总页数大于5页就直接附加五页，否则附加总页数
        this.pagination.pageNumShow=[]
        if (this.pagination.pageNum >= 5) {
          for (let i = 1; i <= 5; i++) {
            this.pagination.pageNumShow.push(i)
          }
        } else {
          for (let i = 1; i <= this.pagination.pageNum; i++) {
            this.pagination.pageNumShow.push(i)
          }
        }
        //页面分组
        for (let i = 0; i < this.pagination.pageNum; i++) {
          this.pagination.totalPage[i] = res.data.data.slice(this.pagination.pageSize * i, this.pagination.pageSize * (i + 1))
        }
        //显示第一页
        this.pagination.dataShow = this.pagination.totalPage[this.pagination.currentPage];
        this.loading=false
      },
      //控制分页选择的颜色
      toPage(i) {
        this.pagination.dataShow = this.pagination.totalPage[i]
        let limit = this.pagination.pageNum >= 5 ? 5 : this.pagination.pageNum
        for (let f = 0; f < limit; f++) {
          if (f === i) {
            var s = document.getElementById('page' + f)
            s.style.color = 'white'
            s.style.background = '#FF7F27'
          } else {
            var s = document.getElementById('page' + f)
            s.style.color = '#FF7F27'
            s.style.background = 'white'
          }
        }
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 750,
          left: 0
        });
      },
      clickTag() {
        console.log(1)
      }
    },
    created() {
      this.getBlog()
      console.log(endTime-beginTime)
    }
  }
</script>

<template>

  <div ref="app" class="app">
    <topNav></topNav>
    <div class="header" id="header" ref="header">

      <!--      <el-image class="bg" :src="require('./assets/images/head.jpg')" />-->
      <!--      <div class="title" data-text="RoCBlog">RoCBlog</div>-->
      <el-image class="logo" :src="require('../assets/images/logo.png')"></el-image>
      <div class="type">
        <vue-typed-js
          class="desc"
          :strings="typingTexts"
          :loop="true"
          :startDelay="200"
          :typeSpeed="100"
          :backSpeed="50"
        >
          <span class="typing"></span>
        </vue-typed-js>
      </div>
      <el-image @click="down" class="down" :src="require('../assets/icon/down.png')"/>
    </div>
    <el-container class="middle" style="min-height: 100vh">
      <el-aside style="position: relative;">
        <personal></personal>
      </el-aside>
      <el-main style="margin-top: 40px;width: 55vw;overflow: hidden">
        <el-skeleton :rows="20" animated v-show="loading"/>
        <div ref="blog" class="blog" v-for="item in pagination.dataShow" :key="item.id" >
          <div class="blog-top">
            <div
              style=" background:#484848;margin-left: 2%;height: 100%;width: 10%;position: absolute;z-index: 999;float: left"></div>
            <div
              style="background:black;margin-left: 2%;height: 100%;width: 10%;border-bottom-right-radius: 10px;position: relative;z-index: 999;">
              <div style="display: flex;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)">
                <div
                  style="width: 13px;height: 13px;background: #ED665A;border-radius: 6.5px;margin-right: 8px;box-shadow: 0 0 2px white"></div>
                <div
                  style="width: 13px;height: 13px;background: #E0C14C;border-radius: 6.5px;margin-right: 8px;box-shadow: 0 0 2px white"></div>
                <div
                  style="width: 13px;height: 13px;background: #73BD47;border-radius: 6.5px;margin-right: 8px;box-shadow: 0 0 2px white"></div>
              </div>
            </div>
            <div
              style=";height: 75%;background: #484848;margin: 0;position: relative;top: 25%;border-top-right-radius: 10px;border-top-left-radius: 10px;color: white;font-size: small;text-align: center">
              <div class="blog-top-tag">{{ item.type }}</div>
            </div>
          </div>
          <div class="info">
            <div class="blog-title" @click="toDetail(item.id)">
              <div>{{ item.title }}</div>
            </div>
            <div style="border-radius: 10px;background-color: whitesmoke;padding: 10px;">
              <div style="display: flex">
                <div class="blog-time"><i class="el-icon-my-time nav-icon"></i>{{ item.createTime }}</div>
                <div class="view-num"><i class="el-icon-my-view nav-icon"></i>{{ item.viewNum }}</div>
              </div>
            </div>
          </div>
          <div class="blog-desc">
            <v-md-preview  :text="item.header"></v-md-preview>
            <el-image v-if="item.cover!=null&&item.cover!=''" class="desc-img" :src="item.cover"
                      style="object-fit: contain"></el-image>
          </div>
          <button @click="toDetail(item.id)"
            style="border:solid 1px black;background-color: whitesmoke;cursor: pointer;margin-top: 20px;width: 20%;height: 40px;border-radius: 20px;position: relative;left: 50%;transform: translate(-50%)">
            查看全文
          </button>
          <div style="width: 100%;height: 20px;margin-top: 20px"></div>
        </div>
        <div class="pagination-control">
          <button @click="prePage" class="pagination-button" style="margin-right: 10px"><i
            class="el-icon-my-prepage nav-icon"></i></button>
          <div style="display: flex">
            <a v-for="(item,index) in pagination.pageNumShow" class="pagination-page" :key="index" :id="page(index)"
               @click="toPage(index)">{{ item }}</a>
          </div>
          <button @click="nextPage" class="pagination-button"><i class="el-icon-my-nextpage nav-icon"></i></button>
        </div>
      </el-main>
      <el-aside style="position:relative;">
        <RandomBlogComponent></RandomBlogComponent>
        <!-- template -->
        <div style="margin-top: 85vh">
          <tag-cloud @clickTag="clickTag" :data="hotTag"></tag-cloud>
        </div>
      </el-aside>
    </el-container>
    <bottomInfo></bottomInfo>
  </div>

</template>
<style>
  @import "../assets/common.css";
  .logo img:hover {
    transition: 1s;
    transform: scale(1.05);
  }
</style>
<style src="../assets/index.css" scoped>
</style>
